<template>
  <div
    class="m-waterfall-wrap"
    :style="`background: ${backgroundColor}; width: ${width}px; padding: ${columnGap}px; column-count: ${columnCount}; column-gap: ${columnGap}px;`"
  >
    <div
      class="m-img"
      :class="{ active: true }"
      :style="`margin-bottom: ${columnGap}px;`"
      v-for="(item, index) in imageData"
      @click="showpic(item)"
      :key="index"
    >
      <img
        class="u-img"
        :src="item.image_link"
        :title="item.snippet"
        :alt="item.snippet"
      />
    </div>
  </div>
</template>
<script>
/*
  纯CSS，实现简单，但图片顺序是每列从上往下排列
*/
export default {
  name: "Waterfall",
  props: {
    imageData: {
      // 瀑布流的图片数组
      type: Array,
      required: true,
      default: () => {
        return [];
      },
    },
    columnCount: {
      // 瀑布流要划分的列数
      type: Number,
      default: 3,
    },
    columnGap: {
      // 瀑布流各列之间的间隙
      type: Number,
      default: 10,
    },
    totalWidth: {
      // 瀑布流区域的总宽度
      type: Number,
      default: 1200,
    },
    backgroundColor: {
      // 瀑布流区域背景填充色
      type: String,
      default: "#F2F4F8",
    },
  },
  computed: {
    width() {
      return this.totalWidth - 2 * this.columnGap;
    },
  },
  methods: {
    showpic(item){
      this.$emit("showpic",item)
    },
    linktourl(src) {
      window.open(src, "_blank");
    },
  },
};
</script>
<style lang="scss" scoped>
.m-waterfall-wrap {
  .m-img {
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    .u-img {
      width: 100%;
      vertical-align: bottom;
    }
  }
}
</style>
